<template>
  <section id="login">
    <div>
      <img src="../../../../static/images/defalut_focus_screen_bg.jpg" alt srcset>
      <div class="loginlogomain">
        <div class="loginlogo">
          <img src="../../../../static/images/login_icon_logo@2x.png" alt srcset>
        </div>
        <div class="pageHint">
          <span>账号注册：</span>
        </div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="ruleForm.phone" clearable placeholder="请输入手机号码"/>
          </el-form-item>
          <el-form-item label="验证码" prop="sendcode" class="code verificationCode">
            <el-input v-model.number="ruleForm.sendcode" placeholder="请输入验证码"></el-input>
            <el-button
              type="button"
              @click="sendcode"
              :disabled="disabled"
              v-if="disabled==false"
            >发送验证码</el-button>
            <el-button
              type="button"
              @click="sendcode"
              :disabled="disabled"
              v-if="disabled==true"
            >{{btntxt}}</el-button>
          </el-form-item>
          <el-form-item label="密 码" prop="password">
            <el-input v-model="ruleForm.password" show-password clearable placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        // console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    var passwordNumb = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    var yzcodeNub = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      } else {
        if (value === 123456) {
          callback()
        } else {
          return callback(new Error('验证码输入错误'))
        }
      }
    }
    return {
      ruleForm: {
        phone: '',
        sendcode: '',
        password: ''
      },
      disabled: false,
      time: 0,
      btntxt: '重新发送',
      rules: {
        phone: [
          { validator: checkPhone, trigger: 'blur', required: true }
        ],
        password: [
          { validator: passwordNumb, trigger: 'blur', required: true }
        ],
        sendcode: [
          { validator: yzcodeNub, trigger: 'blur', required: true }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          this.$message({
            showClose: true,
            message: '注册成功正在为您跳转登录页面。。。',
            type: 'success',
            center: true
          })
          setTimeout(() => {
            this.$router.push({ path: '/', query: {} })
          }, 2500)
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 手机验证发送验证码
    sendcode () {
      const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.ruleForm.phone === '') {
        this.$message({
          message: '手机号不能为空',
          center: true
        })
        return
      }
      if (!reg.test(this.ruleForm.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          center: true
        })
      } else {
        // console.log(this.ruleForm.phone)
        this.$message({
          message: '发送成功',
          type: 'success',
          center: true
        })
        this.time = 60
        this.disabled = true
        this.timer()
      }
    },
    // 60S倒计时
    timer () {
      if (this.time > 0) {
        this.time--
        this.btntxt = this.time + 's后重新获取'
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
        this.btntxt = '获取验证码'
        this.disabled = false
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#login > div {
  width: 1060px;
  height: 600px;
  background-color: #ffffff;
  box-shadow: 0 6px 20px 0 rgba(63, 96, 129, 0.27);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#login > div > img {
  width: 600px;
  height: 600px;
}
.loginlogomain {
  width: 460px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.loginlogo {
  width: 360px;
  height: 164px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.loginlogo > img {
  width: 142px;
  height: 60px;
}
.pageHint {
  width: 360px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: #555555;
  font-size: 14px;
  font-weight: bold;
}
.verificationCode /deep/ .el-form-item__content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.verificationCode /deep/ .el-form-item__content > button {
  margin-left: 60px;
}
.demo-ruleForm {
  width: 440px;
}
</style>
